
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>混入对象mixins</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

</head>

<body>
    <div id="app">
        <p>{{msg}}</p>
        <button @click="print">打印</button>
        <p>----------------</p>
        <my-one></my-one>
    </div>
    <script>
        /* 
            混入就是抽取组件相同的部分
            通过mixins导入组件 语法mixins:[mixin]
        */
        var mixin = {
            created() {
                console.log("混入对象的生命周期");
            },
            // 当数据对象与组件的数据对象冲突时（除了生命周期会合并其他的冲突），以组件为准 方法是挂载在组件上
            data(){
                return {
                    msg:"混入对象的msg你好"
                }
            },
            methods: {
                print(){
                    console.log(this.msg);
                }
            },
        }

        Vue.component("my-one",{
            mixins:[mixin],
            // 同名的钩子函数将合并为一个数组，因此都将被调用 
            // 混入的钩子函数会先于组件的钩子函数执行
            created() {
                console.log("组件自己的生命周期钩子函数");
            },
            data(){
                return {
                    msg:"组件的数据你好"
                }
            },
           template:`
           <div>
                <p>我是子组件---{{msg}}</p>
                <button @click="print">打印</button>
            </div>
           `
        })
        var app = new Vue({
            el:"#app",
            mixins:[mixin],
        })

    </script>
</body>

</html>